<template>
  <div class="text-all">
    <div class="text-con-size">
      <span>字号:</span>
      <template>
        <el-select
          style="width:90px;margin-left:20px;"
          v-model="wordStyle.fontSize"
          placeholder="请选择"
          class="select"
        >
          <el-option v-for="item in this.sizeData" :key="item" :label="item" :value="item"></el-option>
        </el-select>
      </template>
    </div>
    <!-- -->
    <div class="text-con-size">
      <span>样式:</span>
      <el-color-picker class="mycolor" size="small" v-model="wordStyle.color" show-alpha></el-color-picker>
      <div class="text-icon">
        <template v-for="(item, idx) in textStyel">
          <svg-icon
            :key="idx"
            :icon-class="item.status?item.checkicon:item.uncheckicon"
            @click="changes(idx)"
          ></svg-icon>
        </template>
      </div>
    </div>
    <div class="text-con">
      <span>跳转:</span>
      <input type="text" v-model="textObj.mainKey" class="mainKey" />
      <div class="add-tag">
        <span>选择跳转</span>
      </div>
    </div>
  </div>
</template>
<script>
import stote from "@/store/index";
import { mapGetters } from "vuex";
export default {
  computed: {
    // 引入vuex对象，v-model直接对接的就是vuex里面的数据
    ...mapGetters(["wordStyle"]),
    sizeData: function() {
      var sizeArr = [];
      let n = 0;
      for (let i = 10; i <= 120; n++) {
        if (n <= 4) {
          i = i + 2;
          sizeArr[n] = i + "px";
        } else if (n === 5) {
          i = i + 4;
          sizeArr[n] = i + "px";
        } else if (n > 5 && n <= 9) {
          i = i + 6;
          sizeArr[n] = i + "px";
        } else if (n > 9 && n <= 15) {
          i = i + 12;
          sizeArr[n] = i + "px";
        } else {
          break;
        }
      }
      return sizeArr;
    }
  },
  data() {
    return {
      stote,
      color: "rgba(0, 206, 209, 1)",
      textStyel: [
        {
          id: 0,
          checkicon: "derline",
          uncheckicon: "un_derline",
          status: false
        },
        {
          id: 1,
          checkicon: "italic_check",
          uncheckicon: "italic_uncheck",
          status: false
        },
        {
          id: 2,
          checkicon: "strong",
          uncheckicon: "un_strong",
          status: false
        },
        {
          id: 3,
          checkicon: "left",
          uncheckicon: "un_left",
          status: true
        },
        {
          id: 4,
          checkicon: "center",
          uncheckicon: "un_center",
          status: false
        },
        {
          id: 5,
          checkicon: "right_qicheck",
          uncheckicon: "unright",
          status: false
        }
      ],
      valueSize: "",
      textObj: {
        mainKey: "",
        predefineColors: [
          "#ff4500",
          "#ff8c00",
          "#ffd700",
          "#90ee90",
          "#00ced1",
          "#1e90ff",
          "#c71585",
          "rgba(255, 69, 0, 0.68)",
          "rgb(255, 120, 0)",
          "hsv(51, 100, 98)",
          "hsva(120, 40, 94, 0.5)",
          "hsl(181, 100%, 37%)",
          "hsla(209, 100%, 56%, 0.73)",
          "#c7158577"
        ]
      }
    };
  },
  watch: {
    wordStyle: {
      handler(oldVal, newVal) {
        // 更新vuex里面的PageJSON
        this.$store.dispatch("apply/PageJSONUpData");
        // 更新父组件中的PageJSON
        this.$emit('updataNowPageJSON', newVal);
      },
      deep: true
    }
  },
  methods: {
    // 为文本赋值
    changes(idx) {
      for (const i in this.textStyel) {
        if (i > 2) {
          if (Number(i) === idx) {
            this.textStyel[i].status = true;
            if (idx === 3) {
              this.wordStyle.textAlign = "left";
            } else if (idx === 4) {
              this.wordStyle.textAlign = "center";
            } else {
              this.wordStyle.textAlign = "right";
            }
          } else {
            this.textStyel[i].status = false;
          }
        } else {
          if (Number(i) === idx) {
            this.textStyel[idx].status = !this.textStyel[idx].status;
          }
        }
      }
      if (this.textStyel[0].status === true) {
        this.wordStyle.textDecoration = "underline";
      } else {
        this.wordStyle.textDecoration = "";
      }
      if (this.textStyel[1].status === true) {
        this.wordStyle.fontStyle = "italic";
      } else {
        this.wordStyle.fontStyle = "";
      }
      if (this.textStyel[2].status === true) {
        this.wordStyle.fontWeight = "bold";
      } else {
        this.wordStyle.fontWeight = "";
      }
    },
    generated() {}
  }
};
</script>
<style lang="scss" scoped>
@import "./diyset.scss";
.text-all {
  width: 100%;
  height: 100%;
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  .text-con-size {
    @include flexCon(290px, 50px, center, space-between, 64px);
    justify-content: flex-start;
    .mycolor {
      margin-left: 20px;
    }
    .text-icon {
      width: auto;
      margin-left: 10px;
      font-size: 20px;
      svg {
        margin-left: 8px;
      }
    }
    .set-opaq {
      @include wd(auto, 30px);
      margin-left: 16px;
      border-radius: 3px;
      line-height: 30px;
      padding-left: 14px;
      display: flex;
      border: 1px solid rgba(223, 223, 223, 1);
      align-items: center;
      .set-opaq-right {
        @include wd(28px, 28px);
        display: flex;
        align-items: center;
      }
    }
    .upimg {
      margin-left: 18px;
    }
  }
  .text-con {
    @include flexCon(290px, 50px, center, space-between, 64px);
    position: relative;
    margin-top: 20px;
    .text-con-style {
      width: 214px;
      img {
        width: 76px;
        height: 60px;
      }
    }
    input {
      @include wd(225px, 30px);
      background: rgba(255, 255, 255, 1);
      border-radius: 3px;
      font-size: 14px;
      padding-left: 8px;
      border: 1px solid rgba(223, 223, 223, 1);
    }
    .text-spot {
      width: 214px;
    }
    .mainKey {
      width: 150px;
      height: 30px;
      border-radius: 2px;
      border: 1px solid rgba(224, 225, 232, 1);
    }
    .add-tag {
      @include wd(auto, 30px);
      border-radius: 2px;
      font-size: 14px;
      text-align: center;
      line-height: 30px;
      padding: 0 10px;
      border: 1px solid rgba(224, 225, 232, 1);
      cursor: pointer;
    }
  }
}
</style>
<style lang="scss">
.text-all {
  .select {
    input {
      height: 34px;
      line-height: 34px;
    }
  }
}
</style>
